vue 登录权限控制

将用户登录的状态交由 vuex 来控制

当用户点击登录时，先进行一个表单的有效性验证，通过后将表单数据发送到 vuex 中的 action

this.$store
.dispatch("LoginByUsername", this.loginForm)
.then(() => {
    // resolve() 登录成功 
	this.$router.push({ path: "/" });
}).catch(() => {
  	// reject() 登录失败
});

vuex 中的 action 接收到登录事件后使用 promise 异步来处理登录请求

import {
  loginByUsername
} from '@/api/login'
// 获取和设置 cookie
import {
  getToken,
  setToken
} from '@/utils/auth'

actions: {
    // 用户名登录
    LoginByUsername({
      commit
    }, userInfo) {
      // 去用户名空格
      const username = userInfo.username.trim()
      // 向外抛出 promise 处理登录，在 then 后面处理请求成功或失败
      return new Promise((resolve, reject) => {
        // 发送登录请求
        loginByUsername(username, userInfo.password).then(response => {
          // 请求成功
          const data = response.data
          // 更新 state 的 token 值
          commit('SET_TOKEN', data.token)
          // 向 cookie 设置 token
          setToken(response.data.token)
          resolve()
        }).catch(error => {
          // 请求失败
          reject(error)
        })
      })
    }
  }

登录后的权限控制使用全局钩子 router.beforeEach 进行路由拦截

src/router/permission.js

import router from '@/router'
import {
  getToken
} from '@/utils/auth'
// 免登录白名单
const whiteList = ['/login']

router.beforeEach((to, from, next) => {
  if (getToken()) { // 判断是否登录
    // cookie 有值
    if (to.path === '/login') {
      // cookie 有值，并且路径等于 /login
      next({
        path: '/'
      })
    } else {
      // 处理页面权限问题
    }
    next()
  } else { // 没登录则跳转到登录界面
    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
      next()
    } else {
      next('/login') // 否则全部重定向到登录页
    }
  }
})